<template>

	<!-- 商品详情 / 加入购物车 -->
	<div id="Produc_details">
		<div class="content">
			<!-- 商品详情组件 -->
			<div class="banner">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(item,index) in list.slider_image" :key="index"
						style=" width='100%'; height: 100%;">
						<img :src="item" alt="" width="100%; height: 100%;">
					</van-swipe-item>
				</van-swipe>
			</div>


			<!-- 详情 -->
			<ul class="conter">
				<!-- 1 -->
				<li>
					<ol>
						<li>
							<div class="left">
								<h3><span>￥</span>{{ list.price }}</h3>
							</div>
							<div class="right">
								<span class="iconfont icon-fenxiang"></span>
								<p>分享</p>
							</div>
						</li>
						<li>
							<span>
								包邮
							</span>
						</li>
						<li>
							<h4>
								<span>厂家直销</span>
								{{ list.store_info }}
							</h4>
						</li>
						<li>
							<div class="left">
								库存:{{ list.stock }}{{ list.unit_name }}
							</div>
							<div class="right">
								销量:{{ list.product_id }}{{ list.unit_name }}
							</div>
						</li>
						<li>
							<div class="left">
								<img src="@/assets/top_num.png" alt="">
								{{ list.top_name }}.
								第{{ list.top_num }}名
							</div>
							<div class="right">
								<span class="iconfont icon-jinrujiantouxiao"></span>
							</div>
						</li>
					</ol>
				</li>
				<!-- 2 -->
				<li>
					<div class="left">
						<p><span>已选择：</span>佛山</p>
					</div>
					<div class="right">
						<span class="iconfont icon-xiangyoujiantou"></span>
					</div>
				</li>
				<!-- 3 -->
				<li v-show="list.topReply">
					<ol>
						<li>
							<div class="left">
								用户评价(1)
							</div>
							<div class="right">
								<p>100%
									<span>好评率</span>
									<span class="iconfont icon-xiangyoujiantou"></span>
								</p>
							</div>
						</li>
						<li>
							<img :src="(list.topReply || {}).avatar" alt="">&emsp;
							<span>{{ (list.topReply || {}).nickname }}</span>
							<p style="margin-left: 5px;">
								<span v-for="item in (list.topReply || {}).service_score"
									style="font-size: 10px; color: #f00;">
									★
								</span>
							</p>
						</li>
						<li>
							<p>{{ (list.topReply || {}).create_time }}{{ (list.topReply || {}).sku }}</p>
						</li>
						<li>
							<p>{{ (list.topReply || {}).comment }}</p>
						</li>
					</ol>
				</li>
				<!-- 4 -->
				<li>
					<ol>
						<li>
							<div class="left">
								<img :src="(list.merchant || {}).mer_avatar" alt="">
								<div class="ri">
									<h6>{{ (list.merchant || {}).mer_name }}<span>厂家直销</span></h6>
									<p>{{ (list.merchant || {}).care_count }}人关注</p>
								</div>
							</div>
							<div class="right">
								<span>进店</span>
							</div>
						</li>
						<li>
							<p>商品描述<span>{{ (list.merchant || {}).product_score }}</span></p>
							<p>卖家服务<span>{{ (list.merchant || {}).service_score }}</span></p>
							<p>物流服务<span>{{ (list.merchant || {}).postage_score }}</span></p>
						</li>
						<li>
							<h5>店铺推荐</h5>
						</li>
						<li>
							<div v-for="(item,index) in (list.merchant || {}).recommend" :key="index">
								<img :src="item.image" alt="">
								<p>{{ item.store_name }}</p>
								<p>￥<span>{{ item.price }}</span></p>
							</div>
						</li>
					</ol>
				</li>
			</ul>

			<!-- 详情 -->

			<ul class="bottom">
				<h5>产品介绍</h5>
				<li v-html="con_img">
				</li>
			</ul>
		</div>

		<div class="but_bottom">
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" text="客服" badge="" />
				<van-goods-action-icon icon="cart-o" text="购物车" :badge="length == 0 ? '' : length"
					@click="$router.push('/cart')" />
				<van-goods-action-icon icon="shop-o" text="店铺" badge="" />
				<van-goods-action-button type="warning" text="加入购物车" @click="shows()" />
				<van-goods-action-button type="danger" text="立即购买" @click="shows()" />
			</van-goods-action>
		</div>

		<!-- 加入购物车/立即购买    商品信息选项 -->
		<van-action-sheet v-model="show">
			<div class="but_content">
				<!-- 主要内容 -->
				<div class="content">

					<div class="top">
						<div class="left">
							<img :src="(arr.image || '@/assets/logo.png')" alt="">
							<!-- {{ list.sku["佛山日丰单色4米,20*2.8"].sku }} -->
						</div>
						<div class="right">
							<h5>{{ list.store_name }}</h5>
							<p><span>￥</span><span>{{ arr.price }}</span>库存：{{ arr.stock }}</p>
						</div>
					</div>

					<div class="conter_two">
						<div class="contera">
							<h6>类型</h6>
							<ul class="list">
								<li v-for="(item,index) in ((list.attr || [])[0] || {}).attr_values" :key="index"
									:class="attr_values_type == index ? 'on' : ''" @click="type(item,index)">
									{{item}}
								</li>
							</ul>
						</div>
						<div class="conterb" v-show="sttr">
							<h6>型号</h6>
							<ul class="list">
								<li v-for="(item,index) in ((list.attr || [])[1] || {}).attr_values" :key="index"
									:class="attr_values_model == index ? 'on' : ''" @click="model(item,index)">
									{{item}}
								</li>
							</ul>
						</div>
					</div>


					<div class="buttom">
						<h6>数量</h6>
						<van-stepper v-model="value" min="1" max="10" />
					</div>

				</div>
				<!-- 主要内容 -->


				<!-- 底部提交按钮 -->
				<van-goods-action>
					<van-goods-action-icon icon="chat-o" text="客服" badge="" />
					<van-goods-action-icon icon="cart-o" text="购物车" :badge="length == 0 ? '' : length"
						@click="$router.push('/cart')" />
					<van-goods-action-icon icon="shop-o" text="店铺" badge="" />
					<van-goods-action-button type="warning" text="加入购物车" @click="Shopping_Cart()" />
					<van-goods-action-button type="danger" text="立即购买" @click="submit_to()" />
				</van-goods-action>
				<!-- 底部提交按钮 -->
			</div>
		</van-action-sheet>
		<!-- 加入购物车/立即购买    商品信息选项 -->
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		// 添加
		addCartList,
		// 获取
		getCartList
	} from '@/api/cart'
	export default {
		data() {
			return {
				show: false,
				value: 1,
				attr_values_type: 0,
				attr_values_model: 0,
				sttr: true,
				type_text: "",
				model_text: "",
				arr: {},
				obj: {},
				// 购物车商品数量
				length: 0
			}
		},
		props: {
			list: {
				typeof: Array,
				default: []
			},
			content: {
				typeof: String,
				default: ""
			}
		},
		watch: {
			list(news) {
				if (news.attr[1]) {
					this.sttr = true
					console.log(2)
				} else {
					this.sttr = false
					console.log(1)
				}
			}
		},
		created() {
			// 获取购物车数据
			this.getlist()
		},
		computed: {
			con_img() {
				let img = this.content.replace(/<img/g, "<img style='width:100%;'")
				return img
			}
		},
		methods: {
			// 打开弹框
			shows() {
				this.show = !this.show
				if (this.list.attr.length == 0) {
					this.type("", 0)
					console.log(111)
					return
				} else {
					// 类型
					this.type((this.list.attr[0].attr_values || [])[0], 0)
					if (this.list.attr[1]) {
						this.model((this.list.attr[1].attr_values || [])[0], 0)
					}
				}
				// 型号=
				console.log(this.arr)
			},
			// 加入购物车
			Shopping_Cart() {
				var obj = {
					// 单选
					check: false,
					// 商品标题
					pro_title: this.list.store_name,
					// 商品列表展示图片
					pro_img: this.arr.image,
					// 商品价格
					pro_price: this.arr.price,
					// 购物车商品数量
					pro_num: this.value,
					// 规格参数 
					pro_sku: [{
							type_text: "类型",
							model_text: "型号",
						},
						{
							type_text: this.type_text,
							model_text: this.model_text,
						}
					],
					// 自己商城的商品ID 用于点击购物车的图片跳转商品详情
					pro_id: this.list.product_id,
					// token: localStorage.getItem('token'),
				}
				if (obj.pro_img == "") {
					obj.pro_img = this.list.slider_image[0]
				}
				addCartList(obj).then(res => {
					this.show = !this.show
					Toast('添加购物车成功');
					// 更新购物车数据
					this.getlist()
				})
				this.obj = obj
			},
			// 类型
			type(item, index) {
				this.type_text = item

				this.attr_values_type = index

				if (this.list.sku[item]) {
					this.arr = this.list.sku[item]
				} else {
					if (this.model_text != "") {
						this.arr = this.list.sku[item + "," + this.model_text]
					}
				}

			},
			// 型号
			model(item, index) {
				this.model_text = item
				this.attr_values_model = index
				console.log(this.type_text, item)
				this.arr = this.list.sku[String(this.type_text + "," + item)]
			},
			// 获取购物车数据
			getlist() {
				getCartList().then(res => {
					console.log(res)
					if (res.data.code == 1) {
						console.log("获取", res.data.result)
						this.length = res.data.result.length
					}
				})
			},


			// 立即购买
			submit_to() {
				console.log("arr", this.arr)
				this.$router.push("/settle_accounts")
				// 更新本地存储 localStorage的用户信息
				let obj = {
					pro_id: this.list.product_id,
					pro_img: this.arr.image,
					pro_num: this.value,
					pro_price: this.arr.price,
					pro_sku: [{
						type_text: "类型",
						model_text: "型号"
					}, {
						type_text: this.type_text,
						model_text: this.model_text,
					}],
					pro_title: this.list.store_name,
					user_id: this.list.product_id,
				}
				var Arr = [];
				Arr.push(obj)
				localStorage.setItem('arr', JSON.stringify(Arr))
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#Produc_details {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;

		>.content {
			margin-bottom: 50px;

			.banner {
				width: 100%;
				height: 100vw;
				overflow: hidden;

				.van-swipe {
					height: 100vw;

					.van-swipe-item {
						height: 100vw;

						img {
							height: 100vw;
						}
					}
				}
			}

			.conter {
				width: 100%;

				>li {
					padding: 0 15 * $width;
					background-color: #fff;
				}

				>li:nth-of-type(1) {
					overflow: hidden;

					ol {
						padding: 0 0 10 * $width 0;

						>li:nth-of-type(1) {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: 10 * $width 0 0 0;

							h3 {
								font-size: 22 * $width;
								color: #f00;
								line-height: 1;

								span {
									font-size: 14 * $width;
								}
							}

							.right {
								text-align: center;
							}
						}

						>li:nth-of-type(2) {

							span {
								display: inline-block;
								margin: 0 15 * $width 10 * $width 0;
								color: #ff9000;
								background-color: #fff4e6;
								height: 20 * $width;
								line-height: 20 * $width;
								border-radius: 11 * $width;
								padding: 0 13 * $width;
								font-size: 12 * $width;
								font-weight: 400;
							}
						}

						>li:nth-of-type(3) {
							h4 {
								font-size: 16 * $width;

								span {
									display: inline-block;
									align-items: center;
									background: #e93424;
									color: #fff;
									font-size: 10 * $width;
									text-align: center;
									border-radius: 2 * $width;
									padding: 0 2 * $width;
									line-height: 14 * $width;
									margin-right: 4 * $width;
									border: 0.5 * $width solid #e93424;
								}
							}
						}

						>li:nth-of-type(4) {
							display: flex;
							justify-content: space-between;
							line-height: 30 * $width;
							color: #838590;
							font-size: 12 * $width;
						}

						>li:nth-of-type(5) {
							width: 100%;
							height: 30 * $width;
							background-color: #f1f1f1;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-radius: 5 * $width;
							padding: 0 10 * $width;
							font-size: 10 * $width;

							.left {
								height: 100%;
								display: flex;
								align-items: center;

								img {
									width: 54 * $width;
									height: 20 * $width;
									margin-right: 10 * $width;
								}
							}
						}
					}
				}

				>li:nth-of-type(2) {
					display: flex;
					justify-content: space-between;
					margin: 10 * $width 0;
					line-height: 40 * $width;

					p {
						font-size: 14 * $width;
						color: #4d4d4d;

						span {
							color: #989aa3;
						}
					}
				}

				>li:nth-of-type(3) {
					padding: 0 15 * $width 10 * $width 15 * $width;

					ol {
						>li:nth-of-type(1) {
							display: flex;
							justify-content: space-between;
							border-bottom: 1 * $width solid #eee;
							line-height: 40 * $width;

							.right {
								p {
									color: #e93424;

									span {
										color: #4d4d4d;
										font-size: 14 * $width;
									}
								}
							}
						}

						>li:nth-of-type(2) {
							height: 50 * $width;
							display: flex;
							align-items: center;

							img {
								width: 28 * $width;
							}

							img:nth-child(2) {
								height: 14 * $width;
							}
						}

						>li:nth-of-type(3) {
							p {
								line-height: 30 * $width;
								font-size: 14 * $width;
								color: #838590;
							}
						}

						>li:nth-of-type(4) {
							p {
								font-size: 15 * $width;
							}
						}
					}
				}

				>li:nth-of-type(4) {
					margin-top: 10 * $width;
					width: 100%;

					>ol {
						width: 100%;

						>li:nth-of-type(1) {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 10 * $width 0;

							.left {
								display: flex;

								img {
									width: 43 * $width;
									margin-right: 10 * $width;
								}

								.ri {
									h6 {
										font-weight: 800;
										font-size: 14 * $width;

										span {
											display: inline-block;
											align-items: center;
											background: #e93424;
											color: #fff;
											font-size: 10 * $width;
											text-align: center;
											border-radius: 2 * $width;
											padding: 0 2 * $width;
											line-height: 14 * $width;
											margin-right: 4 * $width;
											border: 0.5 * $width solid #e93424;
											margin-left: 3 * $width;
										}
									}

									p {
										font-size: 12 * $width;
									}
								}
							}

							.right {
								span {
									display: inline-block;
									width: 57 * $width;
									height: 25 * $width;
									line-height: 25 * $width;
									background-color: #f12a10;
									text-align: center;
									border-radius: 12 * $width;
									color: #fff;
								}
							}
						}

						>li:nth-of-type(2) {
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1 * $width solid #eee;
							padding-bottom: 10 * $width;

							span {
								color: #e93424;
							}
						}

						>li:nth-of-type(3) {
							line-height: 40 * $width;
						}

						>li:nth-of-type(4) {
							width: 100%;
							width: 30%;
							display: flex;
							padding-bottom: 10 * $width;

							>div {
								margin: 0 4 * $width;
							}

							img {
								width: 108 * $width;
								height: 108 * $width;
							}

							p {
								width: 109 * $width;
								font-size: 14 * $width;
								color: #282828;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							p:nth-of-type(2) {
								color: #e93424;
							}
						}
					}
				}
			}


			.bottom {
				width: 100%;
				margin-top: 20 * $width;

				h5 {
					width: 100%;
					height: 44 * $width;
					line-height: 44 * $width;
					font-size: 16 * $width;
					text-align: center;
					background-color: #fff;
				}

				li {
					width: 100%;

					// min-height: 100vw;
					img {
						height: 100%;
						width: 100%;
						margin: 0;
					}
				}
			}
		}

		.but_content {
			width: 100%;
			padding-bottom: 50 * $width;
			overflow: hidden;

			.content {
				width: 100%;
				padding: 0 15 * $width;
				border-bottom: 1 * $width solid #eee;
				padding-bottom: 10 * $width;
				padding-top: 15 * $width;

				.top {
					display: flex;
					align-items: center;

					.left {
						margin-right: 20 * $width;

						img {
							width: 75 * $width;
							height: 75 * $width;
							border-radius: 10 * $width;
						}
					}

					.right {
						width: 230 * $width;
						height: 65 * $width;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						h5 {
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							font-size: 18 * $width;
							font-weight: 400;
						}

						p {
							color: #999999;

							span {
								color: #f12a10;
							}

							span:nth-of-type(2) {
								font-size: 19 * $width;
								margin-right: 10 * $width;
							}
						}
					}
				}

				.conter_one,
				.conter_two {


					.contera,
					.conterb {
						.list {
							display: flex;
							flex-wrap: wrap;

							li {
								padding: 4 * $width 15 * $width;
								border: 1px solid #999;
								margin-right: 10 * $width;
								margin-bottom: 10 * $width;
								font-size: 12 * $width;
								border-radius: 5 * $width;
								box-sizing: border-box;
							}

							.on {
								border: none;
								color: #fff;
								background-color: #f00;
							}
						}
					}
				}

				h6 {
					line-height: 30 * $width;
					font-size: 16 * $width;
					font-weight: 400;
					color: #999999;
				}

				.buttom {
					margin: 10 * $width 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

	}
</style>
